import { useSetState } from 'ahooks';

import styles from './index.module.scss';

interface SiderProps {
  show: boolean;
  foldSider: () => void;
  children?: JSX.Element;
}

const GlobalSider: React.FC<SiderProps> = props => {
  const { foldSider, children } = props;
  const [animateClass, setAnimateClass] = useSetState({
    mask: 'animate__animated animate__fadeIn',
    aside: 'animate__animated animate__slideInLeft',
  });

  const clickOther = () => {
    setAnimateClass({
      mask: 'animate__animated animate__fadeOut',
      aside: 'animate__animated animate__slideOutLeft',
    });
    setTimeout(() => {
      foldSider();
    }, 150);
  };

  return (
    <div className={`${styles.globalSider} ${animateClass.mask}`}>
      <aside className={`relative float-left w-3/5 h-full bg-white ${animateClass.aside}`}>
        {children}
      </aside>
      <div className="float-left w-2/5 h-full" onClick={clickOther} />
    </div>
  );
};

export default GlobalSider;
